<style scoped>
	li {
		list-style: none;
	}
	
	a {
		text-decoration: none;
	}
	
	.pagination {
		float: right;
		/*padding-right: 15px;*/
	}
	
	.pagination li {
		display: inline-block;
		margin: 0 1px;
	}
	
	.pagination li a {
		padding: .2rem 1rem;
		display: inline-block;
		border: 1px solid #ddd;
		background: #fff;
		color: #0E90D2;
	}
	
	.pagination li a:hover {
		background: #eee;
	}
	
	.pagination li.active a {
		background: #0E90D2;
		color: #fff;
	}
	
	.next {
		padding: .2rem .5rem;
		display: inline-block;
		border: 1px solid #ddd;
		background: #fff;
		color: #0E90D2;
		cursor: pointer;
	}
	
	.next:hover {
		background: #eee;
	}
</style>

<template>
	<div>
		<Row>
			<ul class="pagination " v-for="(item,index) in list">
				<li><span>共{{item.totalsize}}条</span></li>
				<div class="next " v-show="item.current != 1" @click="item.current && goto(item.current--)">
					<</div>
						<div class="next " v-show="item.allpage != item.current && item.allpage != 0 " @click="item.current && goto(item.current++)">
							></div>
			</ul>
		</Row>
		</div>
</template>
<script>
	export default {
		props: [
			'list',
		],
		data() {
			return {}
		},
		computed: {
			pages: function() {
				var pag = [];
				if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
					//总页数和要显示的条数那个大就显示多少条
					var i = Math.min(this.showItem, this.allpage);
					while(i) {
						pag.unshift(i--);
					}
				} else { //当前页数大于显示页数了
					var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
						i = this.showItem;
					if(middle > (this.allpage - this.showItem)) {
						middle = (this.allpage - this.showItem) + 1
					}
					while(i--) {
						pag.push(middle++);
					}
				}
				return pag
			}

		},
		methods: {
			goto: function(index) {
				if(index == this.current) return;
				this.current = index;
			  this.$emit('goto',index)
			}
		}
	}
</script>